// NaiveUI 主题变量集合
// 包含明暗两套主题的所有变量，方便在业务页面中引用和自定义主题颜色

// ========================================
// 基础颜色变量
// ========================================

:root {
  // 主色调
  --n-primary-color: #18a058;
  --n-primary-color-hover: #36ad6a;
  --n-primary-color-pressed: #0c7a43;
  --n-primary-color-suppl: #36ad6a;
  
  // 信息色
  --n-info-color: #2080f0;
  --n-info-color-hover: #4098fc;
  --n-info-color-pressed: #1060c9;
  --n-info-color-suppl: #4098fc;
  
  // 成功色
  --n-success-color: #18a058;
  --n-success-color-hover: #36ad6a;
  --n-success-color-pressed: #0c7a43;
  --n-success-color-suppl: #36ad6a;
  
  // 警告色
  --n-warning-color: #f0a020;
  --n-warning-color-hover: #fcb040;
  --n-warning-color-pressed: #c97c10;
  --n-warning-color-suppl: #fcb040;
  
  // 错误色
  --n-error-color: #d03050;
  --n-error-color-hover: #de576d;
  --n-error-color-pressed: #ab1f3f;
  --n-error-color-suppl: #de576d;
  
  // 中性色
  --n-color: #ffffff;
  --n-color-1: #ffffff;
  --n-color-2: #fafafa;
  --n-color-3: #f6f6f6;
  --n-color-4: #f2f2f2;
  --n-color-5: #e8e8e8;
  --n-color-6: #e0e0e0;
  --n-color-7: #d6d6d6;
  --n-color-8: #cccccc;
  --n-color-9: #b8b8b8;
  --n-color-10: #a0a0a0;
  --n-color-11: #8c8c8c;
  --n-color-12: #787878;
  --n-color-13: #646464;
  --n-color-14: #505050;
  --n-color-15: #3c3c3c;
  --n-color-16: #282828;
  --n-color-17: #141414;
  --n-color-18: #000000;
  --n-color-popover: #ffffff;
  --n-color-modal: #ffffff;
  --n-color-disabled: #000000;
  --n-color-disabled-opacity: 0.5;
  
  // 文本颜色
  --n-text-color: #000000;
  --n-text-color-1: #000000;
  --n-text-color-2: #111111;
  --n-text-color-3: #333333;
  --n-text-color-disabled: #000000;
  --n-text-color-disabled-opacity: 0.5;
  
  // 边框颜色
  --n-border-color: #e0e0e6;
  --n-border-color-1: #e0e0e6;
  --n-border-color-2: #e0e0e6;
  --n-border-color-3: #d0d0d6;
  --n-border-color-disabled: #000000;
  --n-border-color-disabled-opacity: 0.2;
  
  // 分割线颜色
  --n-divider-color: #e0e0e6;
  
  // 字体
  --n-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --n-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  --n-font-size: 14px;
  --n-font-size-1: 12px;
  --n-font-size-2: 12px;
  --n-font-size-3: 13px;
  --n-font-size-4: 14px;
  --n-font-size-5: 14px;
  --n-font-size-6: 16px;
  --n-font-size-7: 18px;
  --n-font-size-8: 20px;
  --n-font-size-9: 24px;
  --n-font-size-10: 30px;
  
  // 圆角
  --n-border-radius: 3px;
  --n-border-radius-small: 2px;
  --n-border-radius-medium: 3px;
  --n-border-radius-large: 6px;
  
  // 高度
  --n-height: 34px;
  --n-height-small: 28px;
  --n-height-medium: 34px;
  --n-height-large: 40px;
  
  // 间距
  --n-padding: 0 12px;
  --n-padding-small: 0 8px;
  --n-padding-medium: 0 12px;
  --n-padding-large: 0 16px;
  --n-tab-gap: 0px;
  
  // 阴影
  --n-box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.08);
  --n-box-shadow-1: 0 2px 8px 2px rgba(0, 0, 0, 0.08);
  --n-box-shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --n-box-shadow-3: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
  
  // 动画
  --n-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --n-bezier-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --n-bezier-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --n-bezier-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --n-duration: 0.3s;
  --n-duration-fast: 0.2s;
  --n-duration-slow: 0.4s;
  
  // 禁用状态
  --n-disabled-color: #000000;
  --n-disabled-color-opacity: 0.5;
  
  // 加载状态
  --n-loading-color: var(--n-primary-color);
  
  // 图标
  --n-icon-size: 16px;
  --n-icon-size-small: 14px;
  --n-icon-size-medium: 16px;
  --n-icon-size-large: 18px;
}

// ========================================
// 暗色主题变量
// ========================================

.dark {
  // 主色调
  --n-primary-color: #63e2b7;
  --n-primary-color-hover: #7ee8c5;
  --n-primary-color-pressed: #4fcba3;
  --n-primary-color-suppl: #7ee8c5;
  
  // 信息色
  --n-info-color: #70c0e8;
  --n-info-color-hover: #8bc9ed;
  --n-info-color-pressed: #5ab7e3;
  --n-info-color-suppl: #8bc9ed;
  
  // 成功色
  --n-success-color: #63e2b7;
  --n-success-color-hover: #7ee8c5;
  --n-success-color-pressed: #4fcba3;
  --n-success-color-suppl: #7ee8c5;
  
  // 警告色
  --n-warning-color: #f2d068;
  --n-warning-color-hover: #f5d97d;
  --n-warning-color-pressed: #efc753;
  --n-warning-color-suppl: #f5d97d;
  
  // 错误色
  --n-error-color: #e88080;
  --n-error-color-hover: #ed9999;
  --n-error-color-pressed: #e36767;
  --n-error-color-suppl: #ed9999;
  
  // 中性色
  --n-color: #18181c;
  --n-color-1: #18181c;
  --n-color-2: #1a1a1f;
  --n-color-3: #1f1f23;
  --n-color-4: #2a2a30;
  --n-color-5: #303036;
  --n-color-6: #36363c;
  --n-color-7: #3c3c42;
  --n-color-8: #424248;
  --n-color-9: #48484e;
  --n-color-10: #4e4e54;
  --n-color-11: #54545a;
  --n-color-12: #5a5a60;
  --n-color-13: #606066;
  --n-color-14: #66666c;
  --n-color-15: #6c6c72;
  --n-color-16: #727278;
  --n-color-17: #78787e;
  --n-color-18: #7e7e84;
  --n-color-popover: #28282d;
  --n-color-modal: #28282d;
  --n-color-disabled: #ffffff;
  --n-color-disabled-opacity: 0.38;
  
  // 文本颜色
  --n-text-color: #ffffff;
  --n-text-color-1: #ffffff;
  --n-text-color-2: #e6e6e6;
  --n-text-color-3: #cccccc;
  --n-text-color-disabled: #ffffff;
  --n-text-color-disabled-opacity: 0.38;
  
  // 边框颜色
  --n-border-color: #3c3c42;
  --n-border-color-1: #3c3c42;
  --n-border-color-2: #3c3c42;
  --n-border-color-3: #48484e;
  --n-border-color-disabled: #ffffff;
  --n-border-color-disabled-opacity: 0.2;
  
  // 分割线颜色
  --n-divider-color: #2b2b2f;
  
  // 阴影
  --n-box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.28);
  --n-box-shadow-1: 0 2px 8px 2px rgba(0, 0, 0, 0.28);
  --n-box-shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
  --n-box-shadow-3: 0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px 48px 16px rgba(0, 0, 0, 0.12);
}

// ========================================
// 组件特定变量
// ========================================

// 按钮
:root {
  --n-button-font-weight: 400;
  --n-button-border: 1px solid var(--n-border-color);
  --n-button-border-active: 1px solid var(--n-primary-color);
  --n-button-border-checked: 1px solid var(--n-primary-color);
  --n-button-border-disabled: 1px solid var(--n-border-color-disabled);
  --n-button-border-focus: 1px solid var(--n-primary-color);
  --n-button-border-hover: 1px solid var(--n-primary-color-hover);
  --n-button-border-pressed: 1px solid var(--n-primary-color-pressed);
  --n-button-color: var(--n-color);
  --n-button-color-active: var(--n-primary-color);
  --n-button-color-checked: var(--n-primary-color);
  --n-button-color-disabled: var(--n-color);
  --n-button-color-disabled-opacity: 1;
  --n-button-color-focus: var(--n-color);
  --n-button-color-hover: var(--n-color);
  --n-button-color-pressed: var(--n-color);
  --n-button-font-size: var(--n-font-size);
  --n-button-height: var(--n-height);
  --n-button-height-large: var(--n-height-large);
  --n-button-height-medium: var(--n-height-medium);
  --n-button-height-small: var(--n-height-small);
  --n-button-icon-color: var(--n-text-color);
  --n-button-icon-color-disabled: var(--n-text-color-disabled);
  --n-button-icon-margin: 0 4px;
  --n-button-padding: 0 14px;
  --n-button-padding-large: 0 18px;
  --n-button-padding-medium: 0 14px;
  --n-button-padding-small: 0 10px;
  --n-button-text-color: var(--n-text-color);
  --n-button-text-color-active: #ffffff;
  --n-button-text-color-checked: #ffffff;
  --n-button-text-color-disabled: var(--n-text-color-disabled);
  --n-button-text-color-focus: var(--n-primary-color);
  --n-button-text-color-hover: var(--n-primary-color-hover);
  --n-button-text-color-pressed: var(--n-primary-color-pressed);
  --n-button-text-color-disabled-opacity: 0.5;
  --n-button-wave-opacity: 0.6;
}

.dark {
  --n-button-border: 1px solid var(--n-border-color);
  --n-button-border-active: 1px solid var(--n-primary-color);
  --n-button-border-checked: 1px solid var(--n-primary-color);
  --n-button-border-disabled: 1px solid var(--n-border-color-disabled);
  --n-button-border-focus: 1px solid var(--n-primary-color);
  --n-button-border-hover: 1px solid var(--n-primary-color-hover);
  --n-button-border-pressed: 1px solid var(--n-primary-color-pressed);
  --n-button-color: var(--n-color);
  --n-button-color-active: var(--n-primary-color);
  --n-button-color-checked: var(--n-primary-color);
  --n-button-color-disabled: var(--n-color);
  --n-button-color-disabled-opacity: 1;
  --n-button-color-focus: var(--n-color);
  --n-button-color-hover: var(--n-color);
  --n-button-color-pressed: var(--n-color);
  --n-button-icon-color: var(--n-text-color);
  --n-button-icon-color-disabled: var(--n-text-color-disabled);
  --n-button-text-color: var(--n-text-color);
  --n-button-text-color-active: #ffffff;
  --n-button-text-color-checked: #ffffff;
  --n-button-text-color-disabled: var(--n-text-color-disabled);
  --n-button-text-color-focus: var(--n-primary-color);
  --n-button-text-color-hover: var(--n-primary-color-hover);
  --n-button-text-color-pressed: var(--n-primary-color-pressed);
}

// 输入框
:root {
  --n-input-border: 1px solid var(--n-border-color);
  --n-input-border-active: 1px solid var(--n-primary-color);
  --n-input-border-disabled: 1px solid var(--n-border-color-disabled);
  --n-input-border-focus: 1px solid var(--n-primary-color);
  --n-input-border-hover: 1px solid var(--n-primary-color-hover);
  --n-input-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2);
  --n-input-color: var(--n-color);
  --n-input-color-disabled: var(--n-color);
  --n-input-color-disabled-opacity: 0.5;
  --n-input-font-size: var(--n-font-size);
  --n-input-height: var(--n-height);
  --n-input-height-large: var(--n-height-large);
  --n-input-height-medium: var(--n-height-medium);
  --n-input-height-small: var(--n-height-small);
  --n-input-icon-color: var(--n-text-color-3);
  --n-input-icon-color-disabled: var(--n-text-color-disabled);
  --n-input-loading-color: var(--n-primary-color);
  --n-input-padding: 0 12px;
  --n-input-padding-large: 0 16px;
  --n-input-padding-medium: 0 12px;
  --n-input-padding-small: 0 8px;
  --n-input-placeholder-color: var(--n-text-color-3);
  --n-input-placeholder-color-disabled: var(--n-text-color-disabled);
  --n-input-text-color: var(--n-text-color);
  --n-input-text-color-disabled: var(--n-text-color-disabled);
  --n-input-border-warning: 1px solid var(--n-warning-color);
  --n-input-border-error: 1px solid var(--n-error-color);
  --n-input-box-shadow-warning: 0 0 0 2px rgba(240, 160, 32, 0.2);
  --n-input-box-shadow-error: 0 0 0 2px rgba(208, 48, 80, 0.2);
}

.dark {
  --n-input-border: 1px solid var(--n-border-color);
  --n-input-border-active: 1px solid var(--n-primary-color);
  --n-input-border-disabled: 1px solid var(--n-border-color-disabled);
  --n-input-border-focus: 1px solid var(--n-primary-color);
  --n-input-border-hover: 1px solid var(--n-primary-color-hover);
  --n-input-box-shadow-focus: 0 0 0 2px rgba(99, 226, 183, 0.2);
  --n-input-color: var(--n-color);
  --n-input-color-disabled: var(--n-color);
  --n-input-color-disabled-opacity: 0.5;
  --n-input-icon-color: var(--n-text-color-3);
  --n-input-icon-color-disabled: var(--n-text-color-disabled);
  --n-input-loading-color: var(--n-primary-color);
  --n-input-placeholder-color: var(--n-text-color-3);
  --n-input-placeholder-color-disabled: var(--n-text-color-disabled);
  --n-input-text-color: var(--n-text-color);
  --n-input-text-color-disabled: var(--n-text-color-disabled);
  --n-input-border-warning: 1px solid var(--n-warning-color);
  --n-input-border-error: 1px solid var(--n-error-color);
  --n-input-box-shadow-warning: 0 0 0 2px rgba(242, 208, 104, 0.2);
  --n-input-box-shadow-error: 0 0 0 2px rgba(232, 128, 128, 0.2);
}

// 选择器
:root {
  --n-select-menu-border: 1px solid var(--n-border-color);
  --n-select-menu-box-shadow: var(--n-box-shadow);
  --n-select-menu-color: var(--n-color-popover);
  --n-select-menu-height: 240px;
  --n-select-menu-padding: 4px 0;
  --n-select-option-color-active: var(--n-color-2);
  --n-select-option-color-checked: var(--n-primary-color-suppl);
  --n-select-option-color-disabled: var(--n-color);
  --n-select-option-color-disabled-opacity: 0.5;
  --n-select-option-color-hover: var(--n-color-2);
  --n-select-option-font-size: var(--n-font-size);
  --n-select-option-height: 34px;
  --n-select-option-height-large: 40px;
  --n-select-option-height-medium: 34px;
  --n-select-option-height-small: 28px;
  --n-select-option-padding: 0 12px;
  --n-select-option-padding-large: 0 16px;
  --n-select-option-padding-medium: 0 12px;
  --n-select-option-padding-small: 0 8px;
  --n-select-option-text-color: var(--n-text-color);
  --n-select-option-text-color-active: var(--n-text-color);
  --n-select-option-text-color-checked: var(--n-primary-color);
  --n-select-option-text-color-disabled: var(--n-text-color-disabled);
  --n-select-option-text-color-disabled-opacity: 0.5;
  --n-select-option-text-color-hover: var(--n-text-color);
  --n-select-tag-color: var(--n-primary-color);
  --n-select-tag-close-color: var(--n-text-color-2);
  --n-select-tag-close-color-hover: var(--n-text-color-1);
  --n-select-tag-close-color-pressed: var(--n-text-color-1);
  --n-select-tag-color-disabled: var(--n-color);
  --n-select-tag-color-disabled-opacity: 0.5;
  --n-select-tag-height: 24px;
  --n-select-tag-padding: 0 6px;
  --n-select-tag-text-color: #ffffff;
  --n-select-tag-text-color-disabled: var(--n-text-color-disabled);
  --n-select-tag-text-color-disabled-opacity: 0.5;
}

.dark {
  --n-select-menu-border: 1px solid var(--n-border-color);
  --n-select-menu-box-shadow: var(--n-box-shadow);
  --n-select-menu-color: var(--n-color-popover);
  --n-select-option-color-active: var(--n-color-2);
  --n-select-option-color-checked: var(--n-primary-color-suppl);
  --n-select-option-color-disabled: var(--n-color);
  --n-select-option-color-disabled-opacity: 0.5;
  --n-select-option-color-hover: var(--n-color-2);
  --n-select-option-text-color: var(--n-text-color);
  --n-select-option-text-color-active: var(--n-text-color);
  --n-select-option-text-color-checked: var(--n-primary-color);
  --n-select-option-text-color-disabled: var(--n-text-color-disabled);
  --n-select-option-text-color-disabled-opacity: 0.5;
  --n-select-option-text-color-hover: var(--n-text-color);
  --n-select-tag-color: var(--n-primary-color);
  --n-select-tag-close-color: var(--n-text-color-2);
  --n-select-tag-close-color-hover: var(--n-text-color-1);
  --n-select-tag-close-color-pressed: var(--n-text-color-1);
  --n-select-tag-color-disabled: var(--n-color);
  --n-select-tag-color-disabled-opacity: 0.5;
  --n-select-tag-text-color: #ffffff;
  --n-select-tag-text-color-disabled: var(--n-text-color-disabled);
  --n-select-tag-text-color-disabled-opacity: 0.5;
}

// 表格
:root {
  --n-table-border-color: var(--n-border-color);
  --n-table-color: var(--n-color);
  --n-table-color-striped: var(--n-color-1);
  --n-table-color-hover: var(--n-color-2);
  --n-table-font-size: var(--n-font-size);
  --n-table-th-color: var(--n-color-1);
  --n-table-th-font-weight: 600;
  --n-table-th-padding: 12px 16px;
  --n-table-th-text-color: var(--n-text-color);
  --n-table-td-color: var(--n-color);
  --n-table-td-padding: 12px 16px;
  --n-table-td-text-color: var(--n-text-color);
  --n-table-border-radius: var(--n-border-radius);
  --n-table-border: 1px solid var(--n-border-color);
  --n-table-box-shadow: var(--n-box-shadow-1);
  --n-table-header-border-bottom: 1px solid var(--n-border-color);
  --n-table-border-color-sorter: var(--n-border-color);
  --n-table-color-sorter: var(--n-text-color-3);
  --n-table-color-sorter-hover: var(--n-text-color-2);
  --n-table-color-sorter-active: var(--n-primary-color);
  --n-table-filter-menu-color: var(--n-color-popover);
  --n-table-filter-menu-border: 1px solid var(--n-border-color);
  --n-table-filter-menu-box-shadow: var(--n-box-shadow);
  --n-table-filter-menu-padding: 8px 12px;
  --n-table-filter-menu-border-radius: var(--n-border-radius);
  --n-table-filter-option-color-active: var(--n-primary-color-suppl);
  --n-table-filter-option-color-hover: var(--n-color-2);
  --n-table-filter-option-color-checked: var(--n-primary-color-suppl);
  --n-table-filter-option-text-color: var(--n-text-color);
  --n-table-filter-option-text-color-active: var(--n-text-color);
  --n-table-filter-option-text-color-checked: var(--n-primary-color);
  --n-table-filter-option-text-color-hover: var(--n-text-color);
  --n-table-expand-color: var(--n-text-color-3);
  --n-table-expand-color-hover: var(--n-text-color);
  --n-table-expand-color-pressed: var(--n-text-color);
  --n-table-loading-color: var(--n-primary-color);
  --n-table-empty-color: var(--n-text-color-3);
  --n-table-summary-color: var(--n-color-1);
  --n-table-summary-text-color: var(--n-text-color);
}

.dark {
  --n-table-border-color: var(--n-border-color);
  --n-table-color: var(--n-color);
  --n-table-color-striped: var(--n-color-1);
  --n-table-color-hover: var(--n-color-2);
  --n-table-th-color: var(--n-color-1);
  --n-table-th-text-color: var(--n-text-color);
  --n-table-td-color: var(--n-color);
  --n-table-td-text-color: var(--n-text-color);
  --n-table-border: 1px solid var(--n-border-color);
  --n-table-header-border-bottom: 1px solid var(--n-border-color);
  --n-table-border-color-sorter: var(--n-border-color);
  --n-table-color-sorter: var(--n-text-color-3);
  --n-table-color-sorter-hover: var(--n-text-color-2);
  --n-table-color-sorter-active: var(--n-primary-color);
  --n-table-filter-menu-color: var(--n-color-popover);
  --n-table-filter-menu-border: 1px solid var(--n-border-color);
  --n-table-filter-menu-box-shadow: var(--n-box-shadow);
  --n-table-filter-option-color-active: var(--n-primary-color-suppl);
  --n-table-filter-option-color-hover: var(--n-color-2);
  --n-table-filter-option-color-checked: var(--n-primary-color-suppl);
  --n-table-filter-option-text-color: var(--n-text-color);
  --n-table-filter-option-text-color-active: var(--n-text-color);
  --n-table-filter-option-text-color-checked: var(--n-primary-color);
  --n-table-filter-option-text-color-hover: var(--n-text-color);
  --n-table-expand-color: var(--n-text-color-3);
  --n-table-expand-color-hover: var(--n-text-color);
  --n-table-expand-color-pressed: var(--n-text-color);
  --n-table-empty-color: var(--n-text-color-3);
  --n-table-summary-color: var(--n-color-1);
  --n-table-summary-text-color: var(--n-text-color);
}

// 模态框
:root {
  --n-modal-color: var(--n-color-modal);
  --n-modal-text-color: var(--n-text-color);
  --n-modal-border-radius: var(--n-border-radius);
  --n-modal-box-shadow: var(--n-box-shadow-3);
  --n-modal-padding: 24px;
  --n-modal-header-padding: 24px 24px 0 24px;
  --n-modal-body-padding: 24px;
  --n-modal-footer-padding: 0 24px 24px 24px;
  --n-modal-separator-color: var(--n-divider-color);
  --n-modal-close-color: var(--n-text-color-3);
  --n-modal-close-color-hover: var(--n-text-color);
  --n-modal-close-color-pressed: var(--n-text-color);
  --n-modal-close-size: 18px;
  --n-modal-mask-color: rgba(0, 0, 0, 0.4);
  --n-modal-transform-origin: center;
  --n-modal-icon-color: var(--n-primary-color);
  --n-modal-icon-size: 24px;
}

.dark {
  --n-modal-color: var(--n-color-modal);
  --n-modal-text-color: var(--n-text-color);
  --n-modal-separator-color: var(--n-divider-color);
  --n-modal-close-color: var(--n-text-color-3);
  --n-modal-close-color-hover: var(--n-text-color);
  --n-modal-close-color-pressed: var(--n-text-color);
  --n-modal-mask-color: rgba(0, 0, 0, 0.6);
  --n-modal-icon-color: var(--n-primary-color);
}

// 消息提示
:root {
  --n-message-color: var(--n-color);
  --n-message-text-color: var(--n-text-color);
  --n-message-border-radius: var(--n-border-radius);
  --n-message-box-shadow: var(--n-box-shadow);
  --n-message-padding: 12px 16px;
  --n-message-max-width: 480px;
  --n-message-icon-color: var(--n-primary-color);
  --n-message-icon-color-info: var(--n-info-color);
  --n-message-icon-color-success: var(--n-success-color);
  --n-message-icon-color-warning: var(--n-warning-color);
  --n-message-icon-color-error: var(--n-error-color);
  --n-message-icon-size: 20px;
  --n-message-close-color: var(--n-text-color-3);
  --n-message-close-color-hover: var(--n-text-color);
  --n-message-close-color-pressed: var(--n-text-color);
  --n-message-close-size: 16px;
  --n-message-border-info: 1px solid var(--n-info-color);
  --n-message-border-success: 1px solid var(--n-success-color);
  --n-message-border-warning: 1px solid var(--n-warning-color);
  --n-message-border-error: 1px solid var(--n-error-color);
  --n-message-color-info: var(--n-info-color);
  --n-message-color-success: var(--n-success-color);
  --n-message-color-warning: var(--n-warning-color);
  --n-message-color-error: var(--n-error-color);
}

.dark {
  --n-message-color: var(--n-color);
  --n-message-text-color: var(--n-text-color);
  --n-message-icon-color: var(--n-primary-color);
  --n-message-icon-color-info: var(--n-info-color);
  --n-message-icon-color-success: var(--n-success-color);
  --n-message-icon-color-warning: var(--n-warning-color);
  --n-message-icon-color-error: var(--n-error-color);
  --n-message-close-color: var(--n-text-color-3);
  --n-message-close-color-hover: var(--n-text-color);
  --n-message-close-color-pressed: var(--n-text-color);
  --n-message-border-info: 1px solid var(--n-info-color);
  --n-message-border-success: 1px solid var(--n-success-color);
  --n-message-border-warning: 1px solid var(--n-warning-color);
  --n-message-border-error: 1px solid var(--n-error-color);
  --n-message-color-info: var(--n-info-color);
  --n-message-color-success: var(--n-success-color);
  --n-message-color-warning: var(--n-warning-color);
  --n-message-color-error: var(--n-error-color);
}

// ========================================
// 自定义变量扩展
// ========================================

:root {
  // 自定义主题色
  --custom-primary: #18a058;
  --custom-primary-light: #36ad6a;
  --custom-primary-dark: #0c7a43;
  
  // 自定义辅助色
  --custom-info: #2080f0;
  --custom-success: #18a058;
  --custom-warning: #f0a020;
  --custom-error: #d03050;
  
  // 自定义中性色
  --custom-white: #ffffff;
  --custom-gray-50: #fafafa;
  --custom-gray-100: #f5f5f5;
  --custom-gray-200: #e8e8e8;
  --custom-gray-300: #d1d5db;
  --custom-gray-400: #9ca3af;
  --custom-gray-500: #6b7280;
  --custom-gray-600: #4b5563;
  --custom-gray-700: #374151;
  --custom-gray-800: #1f2937;
  --custom-gray-900: #111827;
  --custom-black: #000000;
  
  // 自定义阴影
  --custom-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --custom-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --custom-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --custom-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --custom-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  // 自定义间距
  --custom-spacing-1: 0.25rem;
  --custom-spacing-2: 0.5rem;
  --custom-spacing-3: 0.75rem;
  --custom-spacing-4: 1rem;
  --custom-spacing-5: 1.25rem;
  --custom-spacing-6: 1.5rem;
  --custom-spacing-8: 2rem;
  --custom-spacing-10: 2.5rem;
  --custom-spacing-12: 3rem;
  --custom-spacing-16: 4rem;
  --custom-spacing-20: 5rem;
  --custom-spacing-24: 6rem;
  
  // 自定义字体大小
  --custom-text-xs: 0.75rem;
  --custom-text-sm: 0.875rem;
  --custom-text-base: 1rem;
  --custom-text-lg: 1.125rem;
  --custom-text-xl: 1.25rem;
  --custom-text-2xl: 1.5rem;
  --custom-text-3xl: 1.875rem;
  --custom-text-4xl: 2.25rem;
  --custom-text-5xl: 3rem;
  
  // 自定义圆角
  --custom-radius-none: 0;
  --custom-radius-sm: 0.125rem;
  --custom-radius: 0.25rem;
  --custom-radius-md: 0.375rem;
  --custom-radius-lg: 0.5rem;
  --custom-radius-xl: 0.75rem;
  --custom-radius-2xl: 1rem;
  --custom-radius-full: 9999px;
  
  // 自定义动画
  --custom-duration-75: 75ms;
  --custom-duration-100: 100ms;
  --custom-duration-150: 150ms;
  --custom-duration-200: 200ms;
  --custom-duration-300: 300ms;
  --custom-duration-500: 500ms;
  --custom-duration-700: 700ms;
  --custom-duration-1000: 1000ms;
  
  // 自定义渐变
  --custom-gradient-primary: linear-gradient(to right, var(--custom-primary), var(--custom-primary-light));
  --custom-gradient-secondary: linear-gradient(to right, var(--custom-info), var(--custom-success));
  --custom-gradient-dark: linear-gradient(to right, var(--custom-gray-800), var(--custom-gray-900));
  --custom-gradient-light: linear-gradient(to right, var(--custom-gray-100), var(--custom-gray-200));
}

.dark {
  // 自定义暗色主题变量
  --custom-primary: #63e2b7;
  --custom-primary-light: #7ee8c5;
  --custom-primary-dark: #4fcba3;
  
  // 自定义暗色辅助色
  --custom-info: #70c0e8;
  --custom-success: #63e2b7;
  --custom-warning: #f2d068;
  --custom-error: #e88080;
  
  // 自定义暗色中性色
  --custom-white: #ffffff;
  --custom-gray-50: #f9fafb;
  --custom-gray-100: #f3f4f6;
  --custom-gray-200: #e5e7eb;
  --custom-gray-300: #d1d5db;
  --custom-gray-400: #9ca3af;
  --custom-gray-500: #6b7280;
  --custom-gray-600: #4b5563;
  --custom-gray-700: #374151;
  --custom-gray-800: #1f2937;
  --custom-gray-900: #111827;
  --custom-black: #000000;
  
  // 自定义暗色阴影
  --custom-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --custom-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --custom-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --custom-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --custom-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  
  // 自定义暗色渐变
  --custom-gradient-primary: linear-gradient(to right, var(--custom-primary), var(--custom-primary-light));
  --custom-gradient-secondary: linear-gradient(to right, var(--custom-info), var(--custom-success));
  --custom-gradient-dark: linear-gradient(to right, var(--custom-gray-900), var(--custom-black));
  --custom-gradient-light: linear-gradient(to right, var(--custom-gray-700), var(--custom-gray-800));
}